<template>
    <div class="header wrap">
        <h1><img src="../assets/img/indexLogo.6f8ac4f0.png" alt=""></h1>
        <div class="nav">
            <ul>                                                 
                <li :class="$route.path=='/home'?'active':''" @click="$router.push('/home')">首页</li>
                <li :class="$route.path=='/goods'?'active':''" @click="$router.push('/goods')">全部商品</li>
                <li :class="$route.path.startsWith('/user')?'active':''" @click="$router.push('/user')" >个人中心</li>
                <li :class="$route.path=='/order'?'active':''" @click="$router.push('/order')">我的订单</li>
                <li :class="$route.path=='/free'?'active':''" @click="$router.push('/free')">专属福利</li>
            </ul>
        </div>
        <div class="search">
            <input type="text" placeholder="请输入要搜索的商品" v-model="txtVal" @keyup.13="toSearch">
            <span @click="toSearch"><img src="../assets/img/search.png" alt=""></span>
        </div>
    </div>
</template>

<script>
export default {
    data () {
        return {
            txtVal:""

        }
    },
    created(){
    },
    methods:{
        toSearch(){
            // 跳转到 /goods
            this.$router.push(`/goods?keyword=${this.txtVal}`)

        },
        // hdClick(){
        //     let token = localStorage.getItem("x-auth-token");
        //     if(!token){
        //         alert("请先登录");

        //         return
        //     }
        //     this.$router.push('/user')
        // }
    }
}
</script>

<style lang = "less" scoped>
@import url("../assets/styles/global.less");
    .header{
        height: 118px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .nav ul{
            width: 500px;
            display: flex;
            justify-content: space-between;
            li{
                cursor: pointer;
                &.active{
                    color:@base-color;
                    font-weight: 700;
                }
            }
        }
        .search{
            display: flex;
            input{
                width: 214px;
                height: 38px;
                border: 1px solid #DEDEDE;
                border-radius: 20px 0px 0px 20px;
                padding: 0;
                text-indent: 14px;
            }
            span{
                width: 50px;
                height: 40px;
                background: @base-color;
                border-radius: 0px 20px 20px 0px;
                display: flex;
                justify-content: center;
                align-items: center;
                cursor: pointer;
            }
        }
    }
</style>